<template>
  <div>
    <h2>学员信息</h2>
    <div>姓名:{{student.name}}</div>
    <div>年龄:{{student.age}}</div>
    <div>分数:{{student.score}}</div>
    <div>教师:{{student.teacher.name}}</div>
    <button @click="editScore">修改分数</button>
    <button @click="changeTeacher">修改教师</button>
  </div>
</template>

<script lang='ts'>
import { ref, reactive } from 'vue'
export default {
  setup() {
    const student=reactive({
      name:'Allen',
      age:22,
      score:67,
      teacher:{
        name:'Giles'
      }
    })
    const editScore=()=>{
      console.log('student',student);
      student.score=98
    }
    const changeTeacher=()=>{
      student.teacher.name='zhaijizhe'
    }
    return {
      student,
      editScore,
      changeTeacher
    }
  }
}
</script>

<style lang='scss' scoped>

</style>